import { RootState } from '@/store'
import { getChannels } from '@/store/action/channel'
import { Tabs } from 'antd-mobile'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

export default function Channel() {
  const dispatch = useDispatch()
  const { list } = useSelector((state: RootState) => state.channel)
  useEffect(() => {
    dispatch(getChannels())
  }, [dispatch])
  return (
    <div>
      <Tabs>
        {/* 以前写法：<Tabs.TabPane title='水果' key='fruits' /> */}
        {/* 新版写法：<Tabs.Tab title='水果' key='fruits' /> */}
        {list.map((item) => (
          <Tabs.Tab title={item.name} key={item.id} />
        ))}
      </Tabs>
    </div>
  )
}
